/* ==========================================================
   BKV Bonn - Style.css
   Bereinigte Version
   Teil 1 - Grundlayout / Header / Navigation
   ========================================================== */


/* ---------- Grundeinstellungen ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:1.6;
    color:#303030;
    background:#fff;
}

a{
    color:#000;
    text-decoration:none;
    transition:.25s;
}

a:hover,
a:focus{
    text-decoration:none;
    color:#336666;
}

img{
    max-width:100%;
    height:auto;
    display:block;
    border-radius:6px;
}

p{
    margin:0 0 15px;
}

h1,h2,h3,h4,h5,h6{
    margin:0 0 15px;
    font-weight:bold;
    color:#303030;
}

.clearfix{
    clear:both;
}


/* ---------- Bootstrap Container ---------- */

.container{
    max-width:1200px;
    margin:auto;
    padding:0 15px;
}


/* ---------- Header ---------- */

.header{
    background:#74a7a8;
    text-align:center;
}

.headers{
    margin:20px 0;
}

.header-bottom{
    width:100%;
    background:#336666;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    margin-bottom:30px;
    padding:10px 0;
}


/* ---------- Navigation ---------- */

.printing-end {
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:center;
    gap:8px;
    padding:0;
    margin:0;
}


/* ---------- Dropdown ---------- */

.dropdown{
    position:relative;
    display:inline-block;
}

.dropdown-content{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:230px;
    background:#429b88;
    box-shadow:0 8px 18px rgba(0,0,0,.2);
    z-index:9999;
}

.dropdown:hover .dropdown-content{
    display:block;
}

.dropdown-content a{
    display:block;
    color:#fff;
    padding:12px 16px;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.dropdown-content a:last-child{
    border-bottom:none;
}

.dropdown-content a:hover{
    background:#174d45;
}


/* ---------- Buttons ---------- */

.btn-primary{

    background:#003333;
    color:#fff !important;
    border:none;
    border-radius:4px;
    padding:12px 18px;
    font-size:15px;
    transition:.25s;
}

.btn-primary:hover{
    background:#174d45;
    color:#fff !important;
}

.btn-primary2{

    background:#ececec;
    color:#000 !important;
    border:1px solid #d5d5d5;
    border-radius:4px;
    padding:10px 20px;
    font-weight:bold;
    transition:.25s;
}

.btn-primary2:hover{
    background:#003333;
    color:#fff !important;
}


/* ---------- Content ---------- */

.content{
    width:100%;
}

.printing-content{
    padding:10px;
}


/* ---------- Flexbox ---------- */

.flexbox{
    display:flex;
    flex-wrap:wrap;
    gap:0px;
}

@media (max-width:768px){

    .flexbox{
        display:block;
    }

}

/* ==========================================================
   Teil 2 - Newsboxen / Karten
   ========================================================== */


/* ---------- Überschrift ---------- */

.comments-main{
    margin-bottom:25px;
}

.comments-main h2{
    font-size:30px;
    font-weight:700;
    color:#303030;
    margin-bottom:30px;
}


/* ---------- News-Karte ---------- */

.pr-grid1{

    display:flex;
    align-items:stretch;

    background:#fff;

    border:1px solid #4f7172;
    border-radius:15px;

    overflow:hidden;

    margin-bottom:25px;

    min-height:240px;

    transition:.25s;
}

.pr-grid1:hover{

    box-shadow:0 8px 22px rgba(0,0,0,.12);

}


/* ---------- Bild ---------- */

.cmts-main-left{

    flex:0 0 35%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f7f7f7;

    padding:15px;
}

.cmts-main-left img{

    width:100%;
    height:200px;

    object-fit:cover;

    border-radius:6px;
}


/* ---------- Text ---------- */

.cmts-main-right{

    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:20px;
}

.cmts-main-right h3{

    font-size:24px;
    line-height:1.3;

    margin-bottom:12px;
}

.cmts-main-right p{

    font-size:16px;
    line-height:1.6;

    margin-bottom:20px;

    flex-grow:1;
}

.cmts-main-right b{
    font-weight:700;
}


/* ---------- Button ---------- */

.cmts-main-right .btn-primary2{

    align-self:flex-start;
}


/* ---------- Kartenabstand ---------- */

.printing-content{

    padding:0px;
}


/* ---------- Desktop ---------- */

@media(min-width:992px){

    .pr-grid1{
        width:100%;
    }

}


/* ---------- Tablet ---------- */

@media(max-width:991px){

    .pr-grid1{

        flex-direction:column;
    }

    .cmts-main-left{

        flex:none;
        width:100%;
    }

    .cmts-main-left img{

        width:100%;
        height:240px;
    }

}


/* ---------- Handy ---------- */

@media(max-width:576px){

    .comments-main h2{

        font-size:24px;
    }

    .cmts-main-right{

        padding:18px;
    }

    .cmts-main-right h3{

        font-size:21px;
    }

    .cmts-main-left img{

        height:220px;
    }

}

/* ==========================================================
   Teil 3 - Buttons / Footer / Hilfsklassen
   ========================================================== */


/* ---------- Allgemeine Buttons ---------- */

.btn{

    display:inline-block;

    cursor:pointer;

    border:none;

    border-radius:5px;

    transition:.25s;

    text-align:center;

}


/* Primärbutton */

.btn-primary{

    background:#003333;
    color:#fff !important;

    padding:12px 20px;

}

.btn-primary:hover{

    background:#1f5d5d;

}


/* Hellgrauer Button */

.btn-primary2{

    background:#ececec;
    color:#000 !important;

    border:1px solid #d6d6d6;

    padding:10px 22px;

}

.btn-primary2:hover{

    background:#003333;
    color:#fff !important;

}


/* Grüner Button */

.btn-success{

    background:#336666;

    color:#fff;

    padding:10px 18px;

}

.btn-success:hover{

    background:#003333;

}


/* Dunkler Button */

.btn-warning{

    background:#303030;

    color:#fff;

    padding:10px 18px;

}

.btn-warning:hover{

    background:#336666;

}


/* ---------- Footer ---------- */

.footer{

    margin-top:60px;

}

.footer-top{

    background:#111;

    padding:50px 0;

}

.footer-top h4{

    color:#fff;

    margin-bottom:20px;

}

.footer-top a{

    color:#ccc;

}

.footer-top a:hover{

    color:#fff;

}


/* ---------- Footer Boxen ---------- */

.footer-links,
.footer-rechts{

    background:#1d1d1d;

    border-radius:8px;

    padding:30px;

    margin-bottom:25px;

}


/* ---------- Copyright ---------- */

.footer-bottom{

    background:#303030;

    padding:20px;

    text-align:center;

}

.footer-bottom p{

    color:#fff;

    margin:0;

}


/* ---------- Listen ---------- */

ul{

    list-style:none;

    padding:0;

    margin:0;

}


/* ---------- Hilfsklassen ---------- */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-left{

    text-align:left;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}

.pt-1{padding-top:10px;}
.pt-2{padding-top:20px;}
.pt-3{padding-top:30px;}

.pb-1{padding-bottom:10px;}
.pb-2{padding-bottom:20px;}
.pb-3{padding-bottom:30px;}


/* ---------- Bilder ---------- */

.print-main img,
.print-text img{

    width:100%;

    border-radius:8px;

}


/* ---------- Responsive ---------- */

@media (max-width:992px){

    .footer-links,
    .footer-rechts{

        width:100%;

        margin-bottom:20px;

    }

}


@media (max-width:768px){

    .printing-end{

        justify-content:center;

    }

    .btn-primary{

        width:100%;

        margin-bottom:6px;

    }

    .dropdown{

        width:100%;

    }

    .dropdown-content{

        position:static;

        width:100%;

        box-shadow:none;

    }

}


@media (max-width:576px){

    body{

        font-size:15px;

    }

    h2{

        font-size:24px;

    }

    h3{

        font-size:20px;

    }

}


/* ==========================================================
   Teil 4 - Responsive / Feinschliff
   ========================================================== */


/* ---------- Karten Hover ---------- */

.pr-grid1{

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.pr-grid1:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}


/* ---------- Bilder ---------- */

.cmts-main-left{

    overflow:hidden;

}

.cmts-main-left img{

    transition:transform .4s ease;

}

.pr-grid1:hover .cmts-main-left img{

    transform:scale(1.05);

}


/* ---------- Überschriften ---------- */

.comments-main{

    margin-bottom:35px;

}

.comments-main h2{

    font-size:32px;

    font-weight:700;

    color:#303030;

}


/* ---------- Kartenabstände ---------- */

.pr-grid1{

    margin-bottom:30px;

}


/* ---------- Links ---------- */

a{

    transition:all .25s ease;

}

a:hover{

    text-decoration:none;

}


/* ---------- Navigation ---------- */

.dropdown-content{

    border-radius:0 0 8px 8px;

}

.dropdown-content a{

    transition:background .2s;

}


/* ---------- Bilder allgemein ---------- */

img{

    max-width:100%;

    height:auto;

}


/* ---------- Responsive ---------- */

@media (max-width:1200px){

    .container{

        width:95%;

    }

}


@media (max-width:992px){

    .printing-end{

        justify-content:center;

    }

    .col-md-6{

        width:100%;

        margin-bottom:20px;

    }

}


@media (max-width:768px){

    .pr-grid1{

        flex-direction:column;

    }

    .cmts-main-left{

        width:100%;

        padding:0;

    }

    .cmts-main-left img{

        width:100%;

        height:260px;

        object-fit:cover;

        border-radius:8px 8px 0 0;

    }

    .cmts-main-right{

        width:100%;

        padding:20px;

    }

    .btn-primary{

        width:100%;

    }

    .dropdown{

        width:100%;

    }

    .dropdown>a{

        display:block;

    }

}


@media (max-width:576px){

    body{

        font-size:15px;

    }

    .comments-main h2{

        font-size:24px;

        text-align:center;

    }

    .cmts-main-right h3{

        font-size:21px;

    }

    .cmts-main-left img{

        height:220px;

    }

}


/* ---------- Druckansicht ---------- */

@media print{

    .header,
    .header-bottom,
    .footer,
    .dropdown{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

}


/* ==========================================================
   Ende der CSS
   ========================================================== */


/* ERGÄNZUNGEN */


   .hot {
    background:#429b88;
    width:100%;
}

.hot .container {
    max-width:1200px;
    margin:auto;
}

.hot{
    background:#669999;
    padding:20px 0;
}

.header-bottom{
    background:#3d6f6e;
    padding:10px 0;
}


.site-header {
    position: sticky;
    top: 0;
    z-index: 10000;
    width: 100%;
    background-color: #699;
}














/* ==================================================
   Animierter Header – große und kompakte Ansicht
   ================================================== */

body {
    padding-top: 150px;
}

/* Gesamter fester Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 10000;
    background: #699;
    overflow: visible;

    transition: height 0.35s ease;
}


/* ---------- Großer Logo-Bereich ---------- */

.site-header .hot {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 92px;

    overflow: visible;
    transform: translateY(0);

    transition:
        transform 0.35s ease,
        opacity 0.25s ease;
}

.site-header .hot .container {
    position: relative;
    height: 92px;
}

.site-header .hot table {
    width: 100%;
    height: 92px;
}


/* ---------- Logo ---------- */

.site-logo {
    position: absolute;
    top: -10px;
    left: 15px;

    width: 96px !important;
    height: auto;

    z-index: 10003;
    transform: translateY(0) scale(1);
    transform-origin: top left;

    transition: transform 0.35s ease;
}


/* ---------- Titel ---------- */

.site-title {
    margin: 0;
    font-size: 30px;
    opacity: 1;
  transform: translateY(-15px);

    transition:
        opacity 0.2s ease,
        transform 0.35s ease;
}


/* ---------- Menüleiste ---------- */

.site-header .header-bottom {
    position: absolute;
    top: 92px;
    left: 0;

    width: 100%;
    height: 58px;
    margin: 0;
    padding-top: 8px;
    padding-bottom: 53px;

    transform: translateY(0);

    transition:
        transform 0.35s ease,
        padding 0.35s ease;
}

.site-header .header-bottom .container {
    position: relative;
}

.site-header .printing-end {
    transition: padding-left 0.35s ease;
}


/* ==================================================
   Kompakter Zustand beim Scrollen
   ================================================== */

.site-header.scrolled {
    height: 58px;
}

/* Großen Bereich nach oben schieben */
.site-header.scrolled .hot {
    transform: translateY(-92px);
}

/* Menü ebenfalls nach oben schieben */
.site-header.scrolled .header-bottom {
    transform: translateY(-92px);
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Titel verschwindet */
.site-header.scrolled .site-title {
    opacity: 0;
    transform: translateY(-20px);
}

/*
   Das gleiche Logo bewegt sich gegen die Bewegung
   des oberen Bereichs nach unten in die Menüleiste.
*/
.site-header.scrolled .site-logo {
    transform: translateY(94px) scale(0.48);
}

/* Platz in der Navigation für das kleine Logo */
.site-header.scrolled .printing-end {
    padding-left: 60px;
}



/* Logo-Ebene vor die Navigation legen */
.site-header .hot {
    z-index: 2;
}

.site-header .header-bottom {
    z-index: 1;
}

.site-logo {
    z-index: 10;
}

/* Logo beim Scrollen mittig in die Navigation schieben */
.site-header.scrolled .site-logo {
    transform: translateY(94px) scale(0.48);
}






/* ==================================================
   Mobile Navigation horizontal scrollbar
   ================================================== */

@media (max-width: 768px) {

    /* Gesamter Header bleibt oben */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 160px;

        overflow: visible;
        z-index: 10000;
    }

    /* Oberer Bereich mit Logo und Titel */
    .site-header .hot {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 105px;

        padding: 0;
        transform: none;
    }

    .site-header .hot .container,
    .site-header .hot table {
        height: 105px;
    }

    /* Logo auf dem Handy */
    .site-logo {
        top: 10px;
        left: 15px;

        width: 75px !important;
        transform: none;
    }

    /* Titel kleiner darstellen */
    .site-title {
        margin-left: 20px;

        font-size: 21px;
        line-height: 1.15;

        transform: none;
        opacity: 1;
    }

    /* Navigationsleiste */
    .site-header .header-bottom {
        position: absolute;
        top: 105px;
        left: 0;

        width: 100%;
        height: 55px;

        margin: 0;
        padding: 7px 0;

        transform: none;

        overflow: visible;
    }

    /* Container darf auf dem Handy volle Breite haben */
    .site-header .header-bottom .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    /* Menüpunkte in genau einer Zeile */
    .site-header .printing-end {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        gap: 7px;

        width: 100%;
        padding: 0 12px;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Verhindert, dass Menüpunkte zusammengedrückt werden */
    .site-header .printing-end > a,
    .site-header .printing-end > .dropdown {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
    }

    /* Buttons nicht mehr über die ganze Bildschirmbreite */
    .site-header .btn-primary {
        display: block;

        width: auto;
        min-width: max-content;

        margin: 0;
        padding: 10px 16px;

        white-space: nowrap;
        font-size: 14px;
    }

    /* Dropdown selbst nur so breit wie der Button */
    .site-header .dropdown {
        position: relative;
        width: auto;
    }

    /*
       Geöffnetes Untermenü unterhalb der festen Navigation.
       Es liegt über dem Inhalt, verlängert aber nicht den Header.
    */
    .site-header .dropdown-content {
        display: none;

        position: fixed;
        top: 160px;
        left: 10px;
        right: 10px;

        width: auto;
        max-height: calc(100vh - 175px);

        overflow-y: auto;

        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
        border-radius: 0 0 8px 8px;
        z-index: 10010;
    }

    /* Öffnen über deine vorhandene JavaScript-Klasse */
    .site-header .dropdown.mobile-open .dropdown-content {
        display: block;
    }

    /* Hover auf Touch-Geräten nicht verwenden */
    .site-header .dropdown:hover .dropdown-content {
        display: none;
    }

    .site-header .dropdown.mobile-open:hover .dropdown-content {
        display: block;
    }

    /* Abstand für den feststehenden Header */
    body {
        padding-top: 160px;
    }

/* ==================================================
   Eingeklappter Header auf dem Handy
   ================================================== */

.site-header.scrolled {
    height: 55px;
}

/* Oberen Titelbereich aus dem Bildschirm schieben */
.site-header.scrolled .hot {
    transform: translateY(-105px);
}

/* Navigation nach oben schieben */
.site-header.scrolled .header-bottom {
    transform: translateY(-105px);

    padding-top: 7px;
    padding-bottom: 7px;
}

/* Titel ausblenden */
.site-header.scrolled .site-title {
    opacity: 0;
    transform: translateY(-15px);
}

/*
   Logo aus dem oberen Header in die kleine
   Navigationsleiste bewegen
*/
.site-header.scrolled .site-logo {
    top: 111px;
    left: 12px;

    transform: scale(0.52);
}

/* Platz für das kleine Logo vor den Menüpunkten */
.site-header.scrolled .printing-end {
    padding-left: 62px;
}

/* Dropdown direkt unter dem kleinen Header anzeigen */
.site-header.scrolled .dropdown-content {
    top: 55px;
}
}



/* ==================================================
   Header bei Zoom, Tablet und Handy normal groß halten
   ================================================== */

@media (max-width: 992px) {

    /* Gleiche Gesamthöhe wie auf dem Desktop */
    body {
        padding-top: 150px;
    }

    .site-header {
        height: 150px;
    }

    /* Oberer Bereich: gleiche Höhe wie Desktop */
    .site-header .hot {
        height: 92px;
        padding: 0;
    }

    .site-header .hot .container,
    .site-header .hot table {
        height: 92px;
    }

    /* Tabellenzelle des Logos verkleinern */
    .site-header .hot td:first-child {
        width: 88px !important;
        min-width: 88px;
        padding: 0;
        vertical-align: middle;
    }

    /* Text näher an das Logo bringen */
    .site-header .hot td:last-child {
        padding: 0 8px 0 0;
        vertical-align: middle;
    }

    /* Logo mittig in seinem Bereich */
    .site-logo {
        top: 46px;
        left: 44px;

        width: 68px !important;

        transform: translate(-50%, -50%);
        transform-origin: center;

        transition:
            top 0.35s ease,
            left 0.35s ease,
            transform 0.35s ease;
    }

    /* Titel kompakt und näher am Logo */
    .site-title {
        margin: 0;

        font-size: clamp(15px, 3.2vw, 22px);
        line-height: 1.1;

        opacity: 1;
        transform: none;
    }

    /* Navigation beginnt wie auf dem Desktop bei 92px */
    .site-header .header-bottom {
        top: 92px;
        height: 58px;

        padding-top: 7px;
        padding-bottom: 7px;
    }

    /* Dropdown unter dem vollständigen Header */
    .site-header .dropdown-content {
        top: 150px;
    }

    /* ==============================================
       Eingeklappter Zustand beim Scrollen
       ============================================== */

    .site-header.scrolled {
        height: 58px;
    }

    .site-header.scrolled .hot {
        transform: translateY(-92px);
    }

    .site-header.scrolled .header-bottom {
        transform: translateY(-92px);

        padding-top: 5px;
        padding-bottom: 5px;
    }

    .site-header.scrolled .site-title {
        opacity: 0;
        transform: translateY(-15px);
    }

    /*
       Logo nach dem Einklappen links in der
       Navigationsleiste positionieren
    */
    .site-header.scrolled .site-logo {
        top: 111px;
        left: 12px;

        transform: scale(0.52);
        transform-origin: top left;
    }

    /* Platz für das kleine Logo */
    .site-header.scrolled .printing-end {
        padding-left: 58px;
    }

    /* Dropdown unter dem eingeklappten Header */
    .site-header.scrolled .dropdown-content {
        top: 58px;
    }
}



/* ==================================================
   Umschaltbares Menü bei Zoom, Tablet und Handy
   ================================================== */

/* Auf dem normalen Desktop wird der Menüknopf versteckt */
.menu-toggle {
    display: none;
}


/* ==================================================
   Kleine CSS-Breite, zum Beispiel 200 % Zoom
   ================================================== */

@media (max-width: 992px) {

    body {
        padding-top: 150px;
    }

    /* Header bleibt gleich hoch wie am Desktop */
    .site-header {
        height: 150px;
        overflow: visible;
    }

    /* Oberer Bereich */
    .site-header .hot {
        top: 0;
        height: 92px;
        padding: 0;
    }

    .site-header .hot .container,
    .site-header .hot table {
        height: 92px;
    }

    /* Logo-Bereich schmaler */
    .site-header .hot td:first-child {
        width: 90px !important;
        min-width: 90px;
        padding: 0;
        vertical-align: middle;
    }

    .site-header .hot td:last-child {
        padding: 0 8px 0 0;
        vertical-align: middle;
    }

    /* Logo mittig */
    .site-logo {
        top: 46px;
        left: 45px;

        width: 68px !important;

        transform: translate(-50%, -50%);
        transform-origin: center;
    }

    /* Titel näher am Logo */
    .site-title {
        margin: 0;

        font-size: clamp(16px, 3.2vw, 23px);
        line-height: 1.1;

        opacity: 1;
        transform: none;
    }

    /* Navigationsleiste */
    .site-header .header-bottom {
        top: 92px;

        height: 58px;
        padding: 7px 0;

        overflow: visible;
    }

    .site-header .header-bottom .container {
        position: relative;

        width: 100%;
        max-width: none;
        padding: 0 12px;
    }

    /* Blauer beziehungsweise grüner Menüknopf */
    .menu-toggle {
        display: flex;
        align-items: center;
        gap: 12px;

        width: 100%;
        height: 44px;

        padding: 0 16px;

        color: #fff;
        background: #003333;

        border: 0;
        border-radius: 5px;

        font: inherit;
        font-size: 18px;

        cursor: pointer;
    }

    .menu-toggle-icon {
        font-size: 27px;
        line-height: 1;
    }

    /*
       Hauptmenü ist zunächst geschlossen.
       Es öffnet sich unterhalb des Menüknopfes.
    */
    .site-header .printing-end {
        display: none;

        position: absolute;
        top: 51px;
        left: 12px;
        right: 12px;

        width: auto;
        max-height: calc(100vh - 165px);

        padding: 8px;

        overflow-x: hidden;
        overflow-y: auto;

        background: #3d6f6e;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

        border-radius: 0 0 8px 8px;

        z-index: 10020;
    }

    /* Hauptmenü geöffnet */
    .site-header.menu-open .printing-end {
        display: block;
    }

    /* Alle Hauptmenüpunkte untereinander */
    .site-header .printing-end > a,
    .site-header .printing-end > .dropdown {
        display: block;

        width: 100%;
        margin: 0 0 7px;
    }

    .site-header .printing-end > :last-child {
        margin-bottom: 0;
    }

    .site-header .btn-primary {
        display: block;

        width: 100%;
        margin: 0;
        padding: 12px 16px;

        text-align: left;
        white-space: normal;
    }

    /* Kleiner Pfeil hinter Dropdown-Menüpunkten */
    .site-header .dropdown > .btn-primary::after {
        content: "⌄";
        float: right;

        margin-left: 15px;

        font-size: 20px;
        line-height: 1;
    }

    .site-header .dropdown.mobile-open > .btn-primary::after {
        content: "⌃";
    }

    /* Dropdowns als aufklappbare Bereiche */
    .site-header .dropdown {
        position: static;
    }

    .site-header .dropdown-content {
        display: none;

        position: static;

        width: 100%;
        min-width: 0;
        max-height: none;

        margin: 4px 0 8px;

        overflow: visible;

        box-shadow: none;
        border-radius: 5px;

        background: #429b88;
    }

    /* Desktop-Hover auf kleinen Breiten ausschalten */
    .site-header .dropdown:hover .dropdown-content {
        display: none;
    }

    /* Dropdown nach Klick öffnen */
    .site-header .dropdown.mobile-open .dropdown-content,
    .site-header .dropdown.mobile-open:hover .dropdown-content {
        display: block;
    }

    .site-header .dropdown-content a {
        padding: 11px 16px;
    }


    /* ==============================================
       Eingeklappter Header beim Scrollen
       ============================================== */

    .site-header.scrolled {
        height: 58px;
    }

    .site-header.scrolled .hot {
        transform: translateY(-92px);
    }

    .site-header.scrolled .header-bottom {
        transform: translateY(-92px);
    }

    .site-header.scrolled .site-title {
        opacity: 0;
        transform: translateY(-15px);
    }

    /* Kleines Logo links neben dem Menüknopf */
    .site-header.scrolled .site-logo {
        top: 108px;
        left: 8px;

        transform: scale(0.48);
        transform-origin: top left;
    }

    /* Platz für das Logo im eingeklappten Zustand */
    .site-header.scrolled .header-bottom .container {
        padding-left: 61px;
    }

    /* Geöffnetes Menü unter dem kompakten Header */
.site-header.scrolled .printing-end {
    top: 51px;
    left: 12px;
    right: 12px;
}

/* Im eingeklappten Header Platz für das Logo */
.site-header.scrolled .header-bottom .container {
    padding-left: 61px;
    padding-right: 12px;
}



/* Geöffnetes Menü ohne unnötige linke Innenlücke */
.site-header.scrolled .printing-end {
    top: 51px;
    left: 12px;
    right: 12px;

    width: auto;

    padding: 8px;
}

}